<template>
  <!-- 出库负责人弹窗 -->
  <div class="dialog-box">
      <el-dialog v-model="dialogVisible" title="选择负责人" width="800">
          <div class="dialog-content">
              <!-- 分组区域保持不变 -->
              <div class="row-1">
                  <div class="row-1-title">
                      <div>组织架构</div>
                      <div style="cursor: pointer">
                          <el-icon>
                              <Search />
                          </el-icon>
                      </div>
                  </div>
                  <!-- 左侧组织架构树形列表 -->
                  <div class="row-1-content">
                      <el-tree style="max-width: 600px" :data="TreeData"  :props="defaultProps" highlight-current="true" 
                          @node-click="handleNodeClick" />
                  </div>
              </div>

              <!-- 右侧产品列表 -->
              <div class="row-2">
                  <div class="table-container">
                      <el-table ref="leftTableRef" :data="tableData" style="width: 100%" border
                          :row-key="(row: User) => row.id">
                          <el-table-column width="55">
                              <template #default="scope">
                                  <el-radio v-model="selectedRowId" :label="scope.row.id"
                                      @change="handleRadioChange(scope.row)" />
                              </template>
                          </el-table-column>
                          <el-table-column label="姓名" property="name" width="auto">
                          </el-table-column>
                          <el-table-column property="num" label="编号" width="auto" />
                          <el-table-column property="mobile" label="联系电话" show-overflow-tooltip width="auto" />
                      </el-table>
                  </div>
              </div>
          </div>

          <template #footer>
              <div class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button color="#626aef" @click="submit">确认</el-button>
              </div>
          </template>
      </el-dialog>
  </div>
</template>

<script setup lang="ts">
import api from "@/api";
import { ref, defineEmits, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
import type { ElTable } from "element-plus";
const flags = ref<number>();
// 
interface User {
  name: string;
  num: string;
  Sphone: string;
  mobile: string;
  id: number;
}
// 
interface Tree {
  id: number;
  label: string;
  children?: Tree[];
}

const handleNodeClick = (data: Tree) => {
  console.log(data);
  orgId.value = data.id;
};

const TreeData = ref<Tree[]>([
]);
const defaultProps = {
  children: 'children',
  label: 'name'
}
// 获取组织架构树形列表
const getOrgTree = async () => {
  const res = await api.publicFun.getOrgList({});
  if (res.code === 200) {
      TreeData.value = res.data;
  }
};


const tableData = ref<User[]>([
]);
const orgId = ref<number>();
// 获取组织人员
const getOrgList = async () => {
  const res = await api.publicFun.getPurchasingDirectorList({
      // 为当前选择的架构id
      org_id: orgId.value
  });
  if (res.code === 200) {
      tableData.value = res.data;
  }
};

watch(orgId, () => {
  getOrgList();
});

const selectedRowId = ref<Number>();
const selectedRow = ref<User>();

const handleRadioChange = (row: User) => {
  selectedRow.value = row;
  console.log("选中行:", row);
};
// 打开弹窗
const dialogVisible = ref<boolean>(false);
const openLoading = (flag: number = 0) => {
  dialogVisible.value = true;
  flags.value = flag;

  getOrgList();
  getOrgTree();
};
const submit = () => {
  if (selectedRow.value) {
      console.log("提交选中的负责人:", selectedRow.value);
      emit("selectPurchasingDirector", selectedRow.value);
      dialogVisible.value = false;
  } else {
      // 没有选择负责人
      console.warn("请先选择一个负责人");
  }
};

const emit = defineEmits(["selectPurchasingDirector"]);

defineExpose(
  { openLoading }
);
</script>

<style lang="scss" scoped>
.dialog-content {
  display: flex;
  height: 400px;
  flex-direction: row;
  gap: 10px;

  .row-1 {
      flex: 1;
      border: 1px solid #f0f0f0;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .row-1-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px;
          width: 76%;
          border-bottom: 1px solid #f0f0f0;
          margin: 0 auto;
          color: #172b4d;
          flex-shrink: 0;
      }

      .row-1-content {
          flex: 1;
          padding: 10px;
          margin: 0 10px;
          overflow-y: auto;
          overflow-x: hidden;
          max-height: calc(400px - 60px);

          &::-webkit-scrollbar {
              width: 6px;
              height: 6px;
          }

          &::-webkit-scrollbar-thumb {
              border-radius: 3px;
              background: #ddd;
              
              &:hover {
                  background: #999;
              }
          }

          &::-webkit-scrollbar-track {
              border-radius: 3px;
              background: #f5f5f5;
          }

          :deep(.el-tree) {
              background: transparent;
              
              .el-tree-node {
                  .el-tree-node__content {
                      height: 36px;
                      padding: 0 8px;
                      
                      &:hover {
                          background-color: #f5f7fa;
                      }
                  }
                  
                  .el-tree-node__expand-icon {
                      padding: 6px;
                      font-size: 12px;
                      
                      &.is-leaf {
                          color: transparent;
                          cursor: default;
                      }
                  }
              }
          }
      }
  }

  .row-2 {
      flex: 2;
      border: 1px solid #f0f0f0;
      width: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .row-2-search {
          padding: 10px;
          width: 50%;
      }

      .table-container {
          flex: 1;
          overflow-y: auto;
          overflow-x: hidden;

          &::-webkit-scrollbar {
              width: 6px;
              height: 6px;
          }

          &::-webkit-scrollbar-thumb {
              border-radius: 3px;
              background: #ddd;
              
              &:hover {
                  background: #999;
              }
          }

          &::-webkit-scrollbar-track {
              border-radius: 3px;
              background: #f5f5f5;
          }

          .el-table {
              height: 100%;
          }
      }
  }
}

::v-deep .el-dialog {
  --el-dialog-padding-primary: 0px;
  
  .el-dialog__body {
      padding: 20px 10px;
      overflow: hidden;
  }
}

::v-deep .el-dialog__header {
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
  font-weight: bold;
}

::v-deep .dialog-footer {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #000;
}

:deep(.cell) {
  white-space: nowrap;
  text-overflow: ellipsis;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #6860ff;
  border-color: #6860ff;
}

:deep(.el-checkbox__inner:hover) {
  border-color: #626aef !important;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  background-color: #6860ff;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  border-color: #6860ff;
}

:deep(.el-radio__label) {
  display: none;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
  background: #6860ff;
  color: #6860ff;
}

:deep(.el-radio) {
  border-color: none;
}

:deep(.el-tree-node:focus > .el-tree-node__content) {
  background-color: #edecff;
}

:deep(.el-tree-node__content) {
  height: 36px;
}

:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  background-color: #edecff;
  color: #6860ff;
}

:deep(.el-radio__inner:hover) {
  border-color: #626aef;
}
</style>